<template>
	<div class="avatar-upload">
		<div class="avatar-container">
			<a-avatar 
				v-if="modelValue" 
				:src="modelValue" 
				:size="size" 
				class="avatar-with-border clickable-avatar"
				@click="showAvatarPreview(modelValue)"
			/>
			<a-avatar 
				v-else 
				:src="kunkunImg"
				:size="size" 
				class="avatar-with-border clickable-avatar"
				@click="showAvatarPreview(kunkunImg)"
			/>
			<div v-if="uploading" class="avatar-loading">
				<a-spin size="small" />
			</div>
		</div>
		<div class="avatar-actions">
			<a-tabs v-model:active-key="uploadMode" type="card" size="small">
				<a-tab-pane key="file" tab="本地上传">
					<FilePictureUpload
						:picture-url="modelValue"
						:on-success="handleFileUpload"
					/>
				</a-tab-pane>
				<a-tab-pane key="url" tab="网络图片">
					<UrlPictureUpload
						:value="modelValue"
						@update:value="handleUrlUpload"
						:uploading="uploading"
						@update:uploading="uploading = $event"
						button-text="上传头像"
						:size="'small'"
					/>
				</a-tab-pane>
			</a-tabs>
		</div>
		<div class="avatar-tips">
			<a-typography-text type="secondary">
				{{ tips || '支持 JPG、PNG 格式，大小不超过 2MB' }}
			</a-typography-text>
		</div>
		
		<!-- 头像预览模态框 -->
		<a-modal
			v-model:open="previewVisible"
			:footer="null"
			:width="800"
			:centered="true"
			@cancel="handlePreviewCancel"
			class="image-preview-modal"
		>
			<template #title>
				<span>头像预览</span>
			</template>
			<div class="preview-image-container">
				<img :src="previewImage" alt="头像预览" class="preview-image" />
			</div>
		</a-modal>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import UrlPictureUpload from '@/components/picture/UrlPictureUpload.vue'
import FilePictureUpload from '@/components/picture/FilePictureUpload.vue'
import kunkunImg from '@/assets/kunkun.png'

interface Props {
	modelValue?: string
	size?: number
	placeholder?: string
	tips?: string
}

const props = withDefaults(defineProps<Props>(), {
	size: 80,
})

const emit = defineEmits<{
	'update:modelValue': [value: string]
}>()

const uploading = ref(false)
const uploadMode = ref('file')

// 头像预览相关
const previewVisible = ref(false)
const previewImage = ref('')

// 显示头像预览
const showAvatarPreview = (imageUrl: string) => {
	previewImage.value = imageUrl
	previewVisible.value = true
}

// 关闭头像预览
const handlePreviewCancel = () => {
	previewVisible.value = false
	previewImage.value = ''
}

// 文件上传处理
const handleFileUpload = (url: string) => {
	emit('update:modelValue', url)
	message.success('头像上传成功！')
}

// URL上传处理
const handleUrlUpload = (url: string) => {
	emit('update:modelValue', url)
}
</script>

<style scoped lang="scss">
.avatar-upload {
	display: flex;
	flex-direction: column;
	align-items: flex-start; // 改为左对齐，更适合表单布局
	gap: 16px;
	width: 100%;

	.avatar-container {
		position: relative;
		align-self: center; // 头像保持居中

		.avatar-loading {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: rgba(255, 255, 255, 0.8);
			border-radius: 50%;
			padding: 8px;
		}
	}

	.avatar-actions {
		width: 100%;
		min-width: 320px; // 设置最小宽度，确保有足够空间
		max-width: 500px; // 设置最大宽度，避免在大屏幕上过宽

		:deep(.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab) {
			border-radius: 4px 4px 0 0;
			margin-bottom: 8px; // 增加标签页按钮和内容区域的距离
		}

		:deep(.ant-tabs-content-holder) {
			padding: 12px;
			margin-top: 8px; // 增加与标签页导航的距离
		}

		// 确保标签页内容有足够宽度
		:deep(.ant-tabs-tabpane) {
			width: 100%;
		}

		// 增加标签页导航栏的下边距
		:deep(.ant-tabs-nav) {
			margin-bottom: 16px; // 增加导航栏与内容的距离
		}
	}

	.avatar-tips {
		text-align: center;
		font-size: 12px;
		align-self: center; // 提示文字居中
	}

	// 头像橙色边框样式
	.avatar-with-border {
		border: 3px solid #ff8c00 !important;
		box-shadow: 0 2px 8px rgba(255, 140, 0, 0.3) !important;
		transition: all 0.3s ease !important;

		&:hover {
			border-color: #ff7700 !important;
			box-shadow: 0 4px 12px rgba(255, 140, 0, 0.4) !important;
			transform: translateY(-1px) !important;
		}
		
		&.clickable-avatar {
			cursor: pointer;
			
			&:hover {
				transform: translateY(-1px) scale(1.05) !important;
			}
		}
	}

	// 响应式设计
	@media (max-width: 768px) {
		.avatar-actions {
			min-width: 280px;
			max-width: 100%;
		}
	}

	@media (min-width: 769px) and (max-width: 1024px) {
		.avatar-actions {
			min-width: 350px;
		}
	}
}

// 头像预览模态框样式
.image-preview-modal {
	:deep(.ant-modal-content) {
		border-radius: 12px;
		overflow: hidden;
	}

	.preview-image-container {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20px;
		background: #f5f5f5;
		border-radius: 8px;

		.preview-image {
			max-width: 100%;
			max-height: 500px;
			border-radius: 8px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		}
	}
}
</style>
